<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"flat"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="AJAXAJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 VSCoce 插件Live Server Installation Open VSCode and type ctrl+P, type ext install ritwickdey.liveserver. Settings All settings are now listed here Settings Docs.">
<meta property="og:type" content="article">
<meta property="og:title" content="前端&#x2F;JavaScript&#x2F;AJAX&#x2F;AJAX">
<meta property="og:url" content="http://yoursite.com/2020/04/17/%E5%89%8D%E7%AB%AF/JavaScript/AJAX/AJAX/index.html">
<meta property="og:site_name" content="heweiliang blog">
<meta property="og:description" content="AJAXAJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 VSCoce 插件Live Server Installation Open VSCode and type ctrl+P, type ext install ritwickdey.liveserver. Settings All settings are now listed here Settings Docs.">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/05/03/GFHqEOcxSp718Tg.png">
<meta property="article:published_time" content="2020-04-17T08:29:44.842Z">
<meta property="article:modified_time" content="2020-06-26T07:26:18.571Z">
<meta property="article:author" content="heweiliang">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/05/03/GFHqEOcxSp718Tg.png">

<link rel="canonical" href="http://yoursite.com/2020/04/17/%E5%89%8D%E7%AB%AF/JavaScript/AJAX/AJAX/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>前端/JavaScript/AJAX/AJAX | heweiliang blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="heweiliang blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">heweiliang blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="fa fa-fw fa-sitemap"></i>站点地图</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yourname" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/04/17/%E5%89%8D%E7%AB%AF/JavaScript/AJAX/AJAX/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          前端/JavaScript/AJAX/AJAX<a href="https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name_posts/%E5%89%8D%E7%AB%AF/JavaScript/AJAX/AJAX.md" class="post-edit-link" title="编辑" rel="noopener" target="_blank"><i class="fa fa-pencil"></i></a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-04-17 16:29:44" itemprop="dateCreated datePublished" datetime="2020-04-17T16:29:44+08:00">2020-04-17</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:26:18" itemprop="dateModified" datetime="2020-06-26T15:26:18+08:00">2020-06-26</time>
              </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>13k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>12 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="AJAX"><a href="#AJAX" class="headerlink" title="AJAX"></a>AJAX</h1><p>AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术</p>
<h2 id="VSCoce-插件"><a href="#VSCoce-插件" class="headerlink" title="VSCoce 插件"></a>VSCoce 插件</h2><h3 id="Live-Server"><a href="#Live-Server" class="headerlink" title="Live Server"></a>Live Server</h3><hr>
<p>Installation</p>
<p>Open VSCode and type <code>ctrl+P</code>, type <code>ext install ritwickdey.liveserver</code>.</p>
<p>Settings</p>
<p>All settings are now listed here <a href="https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md" target="_blank" rel="noopener">Settings Docs</a>.</p>
<p><code>@ext:ritwickdey.liveserver</code></p>
<h2 id="AJAX基础"><a href="#AJAX基础" class="headerlink" title="AJAX基础"></a>AJAX基础</h2><h4 id="前端相关的技术点"><a href="#前端相关的技术点" class="headerlink" title="前端相关的技术点"></a>前端相关的技术点</h4><ul>
<li><code>html(html5)</code> 主要用来实现页面得排版布局</li>
<li><code>css (css3)</code>主要用来实现页面得样式美化</li>
<li><code>JavaScript(JQuery)</code> 主要用来实现前端功能特效</li>
</ul>
<h3 id="Wampserver安装"><a href="#Wampserver安装" class="headerlink" title="Wampserver安装"></a>Wampserver安装</h3><h3 id="服务器与Ajax"><a href="#服务器与Ajax" class="headerlink" title="服务器与Ajax"></a>服务器与Ajax</h3><hr>
<h3 id="网站"><a href="#网站" class="headerlink" title="网站"></a>网站</h3><p>网站由一系列页面组成（页面由js、css、图片、html标签….. 所有的这些文件都被称为资源）</p>
<h4 id="静态网站"><a href="#静态网站" class="headerlink" title="静态网站"></a>静态网站</h4><h4 id="动态网站"><a href="#动态网站" class="headerlink" title="动态网站"></a>动态网站</h4><h3 id="什么是AJAX"><a href="#什么是AJAX" class="headerlink" title="什么是AJAX"></a>什么是AJAX</h3><p>AJAX = Asynchronous Javascript And XML 异步的JavaScript和XML</p>
<p>AJAX 是一种用于创建快速动态网页的技术</p>
<p>通过在后台与服务器进行少量数据交互，AJAX可以使网页实现异步更新，这意味着可以在不重新在加载整个网页的情况下，对网页的某一部分进行更新</p>
<p>传统的网页（不使用AJAX） 如果需要更新内容，必需重载整个网页</p>
<h3 id="AJAX可以做什么"><a href="#AJAX可以做什么" class="headerlink" title="AJAX可以做什么"></a>AJAX可以做什么</h3><ul>
<li>显示新的HTML内容而不用载入整个页面</li>
<li>提交一个表单并且立即显示结果</li>
<li>登录而不用跳转到新的页面</li>
<li>星级评定组件</li>
<li>遍历数据库信息加载更多而不刷新页面</li>
</ul>
<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><ul>
<li>ajax最早产生于2005年</li>
<li>Ajax  == <code>Asynchronous JavaScript and XML (异步的JavaScript 和 XML)</code></li>
<li>但是它不是像HTML、JavaScript或CSS 这样的一种“正式的”技术，它是表示 ==一些技术的混合交互==的一个术语(JavaScript 、Web 浏览器、Web服务器) ，它使我们可以获取和显示新的内容，而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。</li>
<li>AJAX不是新的编程语言，而是一种使用现有标准的新方法</li>
<li>==AJAX是与服务器交换数据并<code>更新部分网页的艺术</code>，在不重新加载整个页面的情况下==</li>
</ul>
<h3 id="客户端与服务器（计算机概述）"><a href="#客户端与服务器（计算机概述）" class="headerlink" title="客户端与服务器（计算机概述）"></a>客户端与服务器（计算机概述）</h3><p><img src="https://i.loli.net/2020/05/03/GFHqEOcxSp718Tg.png" alt="image-20200503211444689"></p>
<h3 id="通信协议（http-ftp-smtp-pop3…）"><a href="#通信协议（http-ftp-smtp-pop3…）" class="headerlink" title="通信协议（http/ftp/smtp/pop3…）"></a>通信协议（http/ftp/smtp/pop3…）</h3><h4 id="http-协议"><a href="#http-协议" class="headerlink" title="http 协议"></a>http 协议</h4><p>超文本传输协议</p>
<h4 id="https-协议"><a href="#https-协议" class="headerlink" title="https 协议"></a>https 协议</h4><p>超文本加密协议</p>
<h4 id="ftp协议"><a href="#ftp协议" class="headerlink" title="ftp协议"></a>ftp协议</h4><h3 id="网络、IP地址、端口、域名"><a href="#网络、IP地址、端口、域名" class="headerlink" title="网络、IP地址、端口、域名"></a>网络、IP地址、端口、域名</h3><h3 id="静态网站、动态网站"><a href="#静态网站、动态网站" class="headerlink" title="静态网站、动态网站"></a>静态网站、动态网站</h3><p>动态网站技术php常用语法</p>
<p>同步与异步</p>
<p>ajax实现异步请求效果</p>
<h2 id="AJAX-XHR-创建-gt-请求-gt-响应-gt-readyState函数"><a href="#AJAX-XHR-创建-gt-请求-gt-响应-gt-readyState函数" class="headerlink" title="AJAX XHR 创建 =&gt; 请求 =&gt;响应 =&gt; readyState函数"></a>AJAX XHR <code>创建 =&gt; 请求 =&gt;响应 =&gt; readyState函数</code></h2><h3 id="XHR-创建对象"><a href="#XHR-创建对象" class="headerlink" title="XHR 创建对象"></a>XHR 创建对象</h3><p>XMLHttpRequest是AJAX的基础</p>
<h4 id="XMLHttpRequest对象"><a href="#XMLHttpRequest对象" class="headerlink" title="XMLHttpRequest对象"></a>XMLHttpRequest对象</h4><ul>
<li>所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）</li>
<li><code>XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新</code></li>
</ul>
<h4 id="创建XMLHttpRequest对象"><a href="#创建XMLHttpRequest对象" class="headerlink" title="创建XMLHttpRequest对象"></a>创建XMLHttpRequest对象</h4><p>所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。</p>
<ul>
<li>创建DMLHttpRequest对象的语法：</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">variable = <span class="keyword">new</span> XMLHttpRequest();</span><br></pre></td></tr></table></figure>

<ul>
<li>IE5、IE6(老版本的 Internet Explorer)使用 ActiveX 对象</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">variable = <span class="keyword">new</span> ActiveXObject(<span class="string">"Microsoft.XMLHTTP"</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>兼容所有浏览器</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xmlhttp;</span><br><span class="line"><span class="keyword">if</span>(<span class="built_in">window</span>.XMLHttpRequest)&#123;</span><br><span class="line">	<span class="comment">//code for IE7+, Firefox, Chrome, Opera, Safari</span></span><br><span class="line">	xmlhttp = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">	<span class="comment">//// code for IE6, IE5</span></span><br><span class="line">	xmlhttp=<span class="keyword">new</span> ActiveXObject(<span class="string">"Microsoft.XMLHTTP"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="XHR-请求-xmlhttp-open"><a href="#XHR-请求-xmlhttp-open" class="headerlink" title="XHR 请求 xmlhttp.open()"></a>XHR 请求 <code>xmlhttp.open()</code></h3><hr>
<p>XMLHttpRequest 对象用于和服务器交换数据</p>
<h4 id="向服务器发送请求"><a href="#向服务器发送请求" class="headerlink" title="向服务器发送请求"></a>向服务器发送请求</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.open(<span class="string">"GET"</span>,<span class="string">"test.txt"</span>,<span class="string">"true"</span>);</span><br><span class="line">xmlhttp.send();</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">open(<em>method</em>,<em>url</em>,<em>async</em>)</td>
<td align="left">规定请求的类型、URL 以及是否异步处理请求。<em>method</em>：请求的类型；GET 或 POST<em>url</em>：文件在服务器上的位置<em>async</em>：true（异步）或 false（同步）</td>
</tr>
<tr>
<td align="left">send(<em>string</em>)</td>
<td align="left"><code>将请求发送到服务器</code>。<em>string</em>：仅用于 POST 请求</td>
</tr>
</tbody></table>
<h4 id="GET-还是-POST的区别"><a href="#GET-还是-POST的区别" class="headerlink" title="GET 还是 POST的区别"></a>GET 还是 POST的区别</h4><p>GET：GET 更简单也更快，并且在大部分情况下都能用。</p>
<p>POST：以下情况中，请使用 POST 请求：</p>
<ul>
<li>无法使用缓存文件（更新服务器上的文件或数据库）</li>
<li>向服务器发送大量数据（POST 没有数据量限制）</li>
<li>发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠</li>
</ul>
<h5 id="Get请求"><a href="#Get请求" class="headerlink" title="Get请求"></a>Get请求</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.open(<span class="string">"GET"</span>,<span class="string">"demo_get.asp"</span>,<span class="literal">true</span>);</span><br><span class="line">xmlhttp.send();</span><br></pre></td></tr></table></figure>

<p>在上面的例子中，您可能得到的是缓存的结果。</p>
<p>为了避免这种情况，请向 URL 添加一个唯一的 ID：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xlhttp.open(<span class="string">"GET"</span>,<span class="string">"demo_get.asp?t="</span>+ <span class="built_in">Math</span>.random(),<span class="literal">true</span>);</span><br><span class="line">xhhttp.send();</span><br></pre></td></tr></table></figure>

<h5 id="Post请求"><a href="#Post请求" class="headerlink" title="Post请求"></a>Post请求</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.open(<span class="string">"POST"</span>,<span class="string">"demo_post.asp"</span>,<span class="literal">true</span>);</span><br><span class="line">xmlhttp.send();</span><br></pre></td></tr></table></figure>

<p>如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">xlhttp.open(<span class="string">"POST"</span>,<span class="string">"ajax_test.asp"</span>,<span class="literal">true</span>);</span><br><span class="line">xlhttp.setRequestHeader(<span class="string">"Content-type"</span>,<span class="string">"application/x-www-form-unclencoded"</span>);</span><br><span class="line">xhhttp.send(<span class="string">"fname=Bill&amp;name=Gates"</span>);</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">setRequestHeader(<em>header</em>,<em>value</em>)</td>
<td align="left">向请求添加 HTTP 头。<em>header</em>: 规定头的名称<em>value</em>: 规定头的值</td>
</tr>
</tbody></table>
<h4 id="url-服务器上的文件"><a href="#url-服务器上的文件" class="headerlink" title="url-服务器上的文件"></a>url-服务器上的文件</h4><p>open() 方法的 <em>url</em> 参数是服务器上文件的地址：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.open(<span class="string">"GET"</span>,<span class="string">"ajax_test.asp"</span>,<span class="literal">true</span>);</span><br></pre></td></tr></table></figure>

<p>该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。</p>
<h4 id="异步-True-或-False？"><a href="#异步-True-或-False？" class="headerlink" title="异步 - True 或 False？"></a>异步 - True 或 False？</h4><p>AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。</p>
<p>XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.open(&quot;GET&quot;,&quot;ajax_test.asp&quot;,true);</span><br></pre></td></tr></table></figure>

<p>对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。</p>
<p>通过 AJAX，JavaScript 无需等待服务器的响应，而是：</p>
<ul>
<li>在等待服务器响应时执行其他脚本</li>
<li>当响应就绪后对响应进行处理</li>
</ul>
<h5 id="Async-true"><a href="#Async-true" class="headerlink" title="Async = true"></a>Async = true</h5><p>当使用async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.onreadystatechage= <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">if</span>(xmlhttp.readyState == <span class="number">4</span> &amp;&amp; xmlhttp.status == <span class="number">200</span>)&#123;</span><br><span class="line">	<span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>).innerHTML = xmlhttp.responseText;</span><br><span class="line">	&#125;</span><br><span class="line">xmlhttp.open(<span class="string">"GET"</span>,<span class="string">"test1.txt"</span>,<span class="literal">true</span>);</span><br><span class="line">xmlhttp.send();</span><br></pre></td></tr></table></figure>

<h5 id="Async-false"><a href="#Async-false" class="headerlink" title="Async = false"></a>Async = false</h5><p>如需使用 async=false，请将 open() 方法中的第三个参数改为 false：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.open(<span class="string">"GET"</span>,<span class="string">"test1.txt"</span>,<span class="literal">false</span>);</span><br></pre></td></tr></table></figure>

<p>我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。</p>
<p>请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。</p>
<p><strong>注释：</strong>当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.open(<span class="string">"GET"</span>,<span class="string">"test1.txt"</span>,<span class="literal">false</span>);</span><br><span class="line">xmlhttp.send();</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>).innerHTML=xmlhttp.responseText;</span><br></pre></td></tr></table></figure>



<h3 id="XHR-响应"><a href="#XHR-响应" class="headerlink" title="XHR 响应"></a>XHR 响应</h3><hr>
<h4 id="服务器响应"><a href="#服务器响应" class="headerlink" title="服务器响应"></a>服务器响应</h4><p>使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性</p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">responseText</td>
<td align="left">获得字符串形式的响应数据。</td>
</tr>
<tr>
<td align="left">responseXML</td>
<td align="left">获得 XML 形式的响应数据。</td>
</tr>
</tbody></table>
<h4 id="responseText-属性"><a href="#responseText-属性" class="headerlink" title="responseText 属性"></a>responseText 属性</h4><p>如果来自服务器的响应并非 XML，请使用 responseText 属性。</p>
<p>responseText 属性返回字符串形式的响应，因此您可以这样使用：</p>
<h4 id="responseXML-属性"><a href="#responseXML-属性" class="headerlink" title="responseXML 属性"></a>responseXML 属性</h4><p>如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：</p>
<h3 id="XHR-readyState"><a href="#XHR-readyState" class="headerlink" title="XHR readyState"></a>XHR readyState</h3><hr>
<h4 id="onreadystatechange-事件"><a href="#onreadystatechange-事件" class="headerlink" title="onreadystatechange 事件"></a>onreadystatechange 事件</h4><h4 id="使用-Callback-函数"><a href="#使用-Callback-函数" class="headerlink" title="使用 Callback 函数"></a>使用 Callback 函数</h4><h2 id="AJAX高级"><a href="#AJAX高级" class="headerlink" title="AJAX高级"></a>AJAX高级</h2><h3 id="AJAX-ASP-PHP"><a href="#AJAX-ASP-PHP" class="headerlink" title="AJAX ASP/PHP"></a>AJAX ASP/PHP</h3><h3 id="AJAX-数据库"><a href="#AJAX-数据库" class="headerlink" title="AJAX 数据库"></a>AJAX 数据库</h3><h3 id="AJAX-XML文件"><a href="#AJAX-XML文件" class="headerlink" title="AJAX XML文件"></a>AJAX XML文件</h3><p>document.querySelector(“#rn_ad_native_2u1bh”).removeChild(document.querySelector(“#rn_ad_native_2u1bh &gt; div”))</p>
<p>document.querySelector(“body”).removeChild(document.querySelector(“#M572680ScriptRootC885134_0d3d7”))</p>
<p>document.querySelector(“body”).removeChild(document.querySelector(“#rn_ad_native_49crh”))</p>
<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><h1 id="AJA项目"><a href="#AJA项目" class="headerlink" title="AJA项目"></a>AJA项目</h1><h2 id="原生Ajax详解"><a href="#原生Ajax详解" class="headerlink" title="原生Ajax详解"></a>原生Ajax详解</h2><h3 id="隐藏帧iframe方式实现页面局-同步"><a href="#隐藏帧iframe方式实现页面局-同步" class="headerlink" title="隐藏帧iframe方式实现页面局 同步"></a>隐藏帧iframe方式实现页面局 同步</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">        &lt;form action&#x3D;&quot;.&#x2F;iframe.php&quot; method&#x3D;&quot;post&quot; target&#x3D;&quot;myframe&quot;&gt;</span><br><span class="line">            用户名：&lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot;&gt;&lt;span id&#x3D;&quot;info&quot;&gt;&lt;&#x2F;span&gt;&lt;br&gt;</span><br><span class="line">            密码：&lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;password&quot;&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登录&quot;&gt;</span><br><span class="line">        &lt;&#x2F;form&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &lt;iframe width&#x3D;&quot;0&quot; height&#x3D;&quot;0&quot;  frameborder&#x3D;&quot;0&quot; name&#x3D;&quot;myframe&quot;&gt;&lt;&#x2F;iframe&gt;</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    &lt;?php </span><br><span class="line">$uname &#x3D; $_POST[&#39;username&#39;];</span><br><span class="line">$pw &#x3D; $_POST[&#39;password&#39;];</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; if($uname &#x3D;&#x3D; &#39;admin&#39; &amp;&amp; $pw &#x3D;&#x3D; &#39;123&#39;)&#123;</span><br><span class="line">&#x2F;&#x2F;     echo &#39;登录成功&#39;;</span><br><span class="line">&#x2F;&#x2F; &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">if($uname &#x3D;&#x3D; &#39;admin&#39; &amp;&amp; $pw &#x3D;&#x3D; &#39;123&#39;)&#123;</span><br><span class="line">?&gt;</span><br><span class="line">    &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">        parent.document.getElementById(&#39;info&#39;).innerHTML &#x3D; &#39;登录成功&#39;;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;?php &#125;else&#123; ?&gt;</span><br><span class="line">    &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">        parent.document.getElementById(&#39;info&#39;).innerHTML &#x3D; &#39;登录失败&#39;;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;?php &#125; ?&gt;</span><br></pre></td></tr></table></figure>



<h3 id="实现页面局部更新"><a href="#实现页面局部更新" class="headerlink" title="实现页面局部更新"></a>实现页面局部更新</h3><p>使用Ajax发送请求需要如下几步：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line">get</span><br><span class="line">&#x2F;&#x2F;创建XMLHttpRequest 对象</span><br><span class="line">var xhr &#x3D; null</span><br><span class="line">if(window.XMLHttpRequest)&#123;</span><br><span class="line">	xhr &#x3D; new XMLHttpRequest(); &#x2F;&#x2F; 标准浏览器</span><br><span class="line">&#125;else&#123;</span><br><span class="line">	xhr &#x3D; new ActiveXObject(&quot;Microsoft&quot;) &#x2F;&#x2F; IE老版本 IE6 </span><br><span class="line">&#125;</span><br><span class="line">准备发送</span><br><span class="line">参数一：请求方式（get获取数据；post提交数据）</span><br><span class="line">参数二：请求地址</span><br><span class="line">参数三：同步或者异步标志位，默认是true表示异步，false表示同步</span><br><span class="line">如果是get 请求那么请求参数必须在url中传递</span><br><span class="line">encodeURI() 用来对中文参数进行编码。防止乱码</span><br><span class="line">var param &#x3D; &#39;username&#x3D;&#39;+uname+&#39;&amp;password&#39;</span><br><span class="line">xhr.open(&#39;get&#39;,&#39;02get.php?+encodeURI(param)&#39;+pw,true);</span><br><span class="line">执行发送动作</span><br><span class="line">xhr.send(null); &#x2F;&#x2F;get请求这里需要添加null参数</span><br><span class="line">指定回调函数</span><br><span class="line">xhr.onreadystatechange &#x3D; function()&#123;</span><br><span class="line">	if(xhr.readyState &#x3D;&#x3D; 4 &amp;&amp; xhr.status &#x3D;&#x3D; 200)&#123;</span><br><span class="line">		cosole.log(xhr.responseText)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">post</span><br><span class="line"></span><br><span class="line">var xhr &#x3D; null</span><br><span class="line">if(window.XMLHttpRequest)&#123;</span><br><span class="line">	xhr &#x3D; new XMLHttpRequest(); &#x2F;&#x2F; 标准浏览器</span><br><span class="line">&#125;else&#123;</span><br><span class="line">	xhr &#x3D; new ActiveXObject(&quot;Microsoft&quot;) &#x2F;&#x2F; IE老版本 IE6 </span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F;readyState &#x3D; 0表示xhr对象创建完成</span><br><span class="line">准备发送</span><br><span class="line">参数一：请求方式（get获取数据；post提交数据）</span><br><span class="line">参数二：请求地址</span><br><span class="line">参数三：同步或者异步标志位，默认是true表示异步，false表示同步</span><br><span class="line">如果是get 请求那么请求参数必须在url中传递</span><br><span class="line">post请求参数通过send传递，不需要通过encodeURI()转码必须设置请求头信息</span><br><span class="line">var param &#x3D; &#39;username&#x3D;&#39;+uname+&#39;&amp;password&#39;</span><br><span class="line">xhr.o pen(&#39;post&#39;,&#39;02get.php&#39;+pw,true);</span><br><span class="line"></span><br><span class="line">xhr.setRequestHeader(&quot;Content-Type&quot;,&quot;application&#x2F;x-www-form-urlencoded&quot;);</span><br><span class="line">执行发送动作</span><br><span class="line">xhr.send(param); &#x2F;&#x2F;post请求在这里传递，并且不需要转码</span><br><span class="line"></span><br><span class="line">指定回调函数 </span><br><span class="line">&#x2F;&#x2F; readyState &#x3D; 1表示已经发生了请求</span><br><span class="line">&#x2F;&#x2F; 该函数调用的条件就是readyState状态发生变化(不包括从0变为1)</span><br><span class="line">xhr.onreadystatechange &#x3D; function()&#123;</span><br><span class="line">	&#x2F;*</span><br><span class="line">	readyState:</span><br><span class="line">	2 浏览器已经收到了服务器响应的数据</span><br><span class="line">	3 正在解析数据</span><br><span class="line">	4 数据已经解析完成，可以使用了，但是数据不一定是正常的</span><br><span class="line">	*&#x2F;</span><br><span class="line">	</span><br><span class="line">	if(xhr.readyState &#x3D;&#x3D; 4 &amp;&amp; xhr.status &#x3D;&#x3D; 200)&#123;</span><br><span class="line">	&#x2F;&#x2F; 200 状态码 响应成功  404 没有找到请求的资源 500 服务器端错误</span><br><span class="line">	&#x2F;&#x2F; responseText</span><br><span class="line">		cosole.log(xhr.responseText)</span><br><span class="line">		&#x2F;&#x2F;var data &#x3D; xhr.responseXML; xml</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>onreadysatechange</p>
<p>xhr.readyState</p>
<p>0 xhr对象初始化</p>
<p>1 执行发送动作</p>
<p>2 服务器端数据已经全部返回</p>
<p>3 数据正在解析</p>
<p>4 数据解析完成，可以使用了</p>
<p>xhr.status </p>
<p>200 数据相应正常</p>
<p>404 没有找到资源</p>
<p>500 服务器端错误</p>
<h3 id="xhr对象创建"><a href="#xhr对象创建" class="headerlink" title="xhr对象创建"></a>xhr对象创建</h3><h3 id="请求参数分析"><a href="#请求参数分析" class="headerlink" title="请求参数分析"></a>请求参数分析</h3><h3 id="响应状态分析"><a href="#响应状态分析" class="headerlink" title="响应状态分析"></a>响应状态分析</h3><h3 id="xml数据格式-用的少"><a href="#xml数据格式-用的少" class="headerlink" title="xml数据格式 用的少"></a>xml数据格式 用的少</h3><p>元数据：描述数据的数据</p>
<p>这种数据格式的弊端</p>
<ol>
<li>元数据占用的数据量比较大，不利于大量数据的网络传输</li>
<li>解析不太方便</li>
</ol>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span> </span><br><span class="line">// 编码和版本</span><br><span class="line"><span class="tag">&lt;<span class="name">booklist</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">book</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">name</span>&gt;</span>三国演义<span class="tag">&lt;/<span class="name">name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">author</span>&gt;</span>罗贯中<span class="tag">&lt;/<span class="name">author</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">desc</span>&gt;</span>一个杀伐果断的年代<span class="tag">&lt;/<span class="name">desc</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">book</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">book</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">name</span>&gt;</span>撒旦法<span class="tag">&lt;/<span class="name">name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">author</span>&gt;</span>罗贯中<span class="tag">&lt;/<span class="name">author</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">desc</span>&gt;</span>一个杀伐果断的年代<span class="tag">&lt;/<span class="name">desc</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">book</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">booklist</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">xhr.onreadystatechange &#x3D; function()&#123;</span><br><span class="line">	&#x2F;*</span><br><span class="line">	readyState:</span><br><span class="line">	2 浏览器已经收到了服务器响应的数据</span><br><span class="line">	3 正在解析数据</span><br><span class="line">	4 数据已经解析完成，可以使用了，但是数据不一定是正常的</span><br><span class="line">	*&#x2F;</span><br><span class="line">	</span><br><span class="line">	if(xhr.readyState &#x3D;&#x3D; 4 &amp;&amp; xhr.status &#x3D;&#x3D; 200)&#123;</span><br><span class="line">	&#x2F;&#x2F; 200 状态码 响应成功  404 没有找到请求的资源 500 服务器端错误</span><br><span class="line">	&#x2F;&#x2F; responseText</span><br><span class="line">		cosole.log(xhr.responseText)</span><br><span class="line">		var data &#x3D; xhr.responseXML; xml</span><br><span class="line">		var booklist &#x3D; data.getElementsByTagName(&#39;booklist&#39;);</span><br><span class="line">		var books &#x3D; bookList[0].childNodes; </span><br><span class="line">		console.log(books[0].nodeType) 包括文本节点</span><br><span class="line">		var books &#x3D; bookList[0].children 不包括文本节点</span><br><span class="line">		console.log(bookList); </span><br><span class="line">		console.log(bookList[0]);</span><br><span class="line">		console.log(data);</span><br><span class="line">		</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>xml</p>
<h3 id="xml数据解析"><a href="#xml数据解析" class="headerlink" title="xml数据解析"></a>xml数据解析</h3><h3 id="php开发xml"><a href="#php开发xml" class="headerlink" title="php开发xml"></a>php开发xml</h3><p>php 解析xml文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&lt;?php</span><br><span class="line">	header(&quot;Content-Type:text&#x2F;xml;&quot;)</span><br><span class="line">	&#x2F;&#x2F;这里设置响应头信息，保证浏览器可以在相应内容识别为xml文件类型</span><br><span class="line">	$arr &#x3D; array();</span><br><span class="line">	$arr[0] &#x3D; array(&quot;name&quot;) </span><br><span class="line">?&gt;</span><br><span class="line">&lt;?xml version&#x3D;&quot;1.0&quot; encoding&#x3D;&quot;utf-8&quot;?&gt; </span><br><span class="line">&#x2F;&#x2F; 编码和版本</span><br><span class="line">&lt;booklist&gt;</span><br><span class="line">	&lt;book&gt;</span><br><span class="line">        &lt;name&gt;三国演义&lt;&#x2F;name&gt;</span><br><span class="line">        &lt;author&gt;罗贯中&lt;&#x2F;author&gt;</span><br><span class="line">        &lt;desc&gt;一个杀伐果断的年代&lt;&#x2F;desc&gt;</span><br><span class="line">    &lt;&#x2F;book&gt;</span><br><span class="line">    &lt;book&gt;</span><br><span class="line">        &lt;name&gt;撒旦法&lt;&#x2F;name&gt;</span><br><span class="line">        &lt;author&gt;罗贯中&lt;&#x2F;author&gt;</span><br><span class="line">        &lt;desc&gt;一个杀伐果断的年代&lt;&#x2F;desc&gt;</span><br><span class="line">    &lt;&#x2F;book&gt;</span><br><span class="line">&lt;&#x2F;booklist&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;?php </span><br><span class="line">    header(&quot;Content-Type:text&#x2F;xml;&quot;);&#x2F;&#x2F;这里设置响应头信息，保证浏览器可以把相应内容识别为xml文件类型</span><br><span class="line"></span><br><span class="line">    $arr &#x3D; array();</span><br><span class="line">    $arr[0] &#x3D; array(&quot;name&quot;&#x3D;&gt;&quot;三国演义&quot;,&quot;author&quot;&#x3D;&gt;&quot;罗贯中&quot;,&quot;desc&quot;&#x3D;&gt;&quot;一个杀伐纷争的年代&quot;);</span><br><span class="line">    $arr[1] &#x3D; array(&quot;name&quot;&#x3D;&gt;&quot;水浒传&quot;,&quot;author&quot;&#x3D;&gt;&quot;施耐庵&quot;,&quot;desc&quot;&#x3D;&gt;&quot;108条好汉的故事&quot;);</span><br><span class="line">    $arr[2] &#x3D; array(&quot;name&quot;&#x3D;&gt;&quot;西游记&quot;,&quot;author&quot;&#x3D;&gt;&quot;吴承恩&quot;,&quot;desc&quot;&#x3D;&gt;&quot;佛教与道教斗争&quot;);</span><br><span class="line">    $arr[3] &#x3D; array(&quot;name&quot;&#x3D;&gt;&quot;红楼梦&quot;,&quot;author&quot;&#x3D;&gt;&quot;曹雪芹&quot;,&quot;desc&quot;&#x3D;&gt;&quot;一个封建王朝的缩影&quot;);</span><br><span class="line"> ?&gt;</span><br><span class="line">&lt;?xml version&#x3D;&quot;1.0&quot; encoding&#x3D;&quot;utf-8&quot; ?&gt;</span><br><span class="line">&lt;booklist&gt;</span><br><span class="line">    &lt;book&gt;</span><br><span class="line">        &lt;name&gt;&lt;?php echo $arr[0][&#39;name&#39;] ?&gt;&lt;&#x2F;name&gt;</span><br><span class="line">        &lt;author&gt;&lt;?php echo $arr[0][&#39;author&#39;] ?&gt;&lt;&#x2F;author&gt;</span><br><span class="line">        &lt;desc&gt;&lt;?php echo $arr[0][&#39;desc&#39;] ?&gt;&lt;&#x2F;desc&gt;</span><br><span class="line">    &lt;&#x2F;book&gt;</span><br><span class="line">    &lt;book&gt;</span><br><span class="line">        &lt;name&gt;&lt;?php echo $arr[1][&#39;name&#39;] ?&gt;&lt;&#x2F;name&gt;</span><br><span class="line">        &lt;author&gt;&lt;?php echo $arr[1][&#39;author&#39;] ?&gt;&lt;&#x2F;author&gt;</span><br><span class="line">        &lt;desc&gt;&lt;?php echo $arr[1][&#39;desc&#39;] ?&gt;&lt;&#x2F;desc&gt;</span><br><span class="line">    &lt;&#x2F;book&gt;</span><br><span class="line">    &lt;book&gt;</span><br><span class="line">        &lt;name&gt;&lt;?php echo $arr[2][&#39;name&#39;] ?&gt;&lt;&#x2F;name&gt;</span><br><span class="line">        &lt;author&gt;&lt;?php echo $arr[2][&#39;author&#39;] ?&gt;&lt;&#x2F;author&gt;</span><br><span class="line">        &lt;desc&gt;&lt;?php echo $arr[2][&#39;desc&#39;] ?&gt;&lt;&#x2F;desc&gt;</span><br><span class="line">    &lt;&#x2F;book&gt;</span><br><span class="line">    &lt;book&gt;</span><br><span class="line">        &lt;name&gt;&lt;?php echo $arr[3][&#39;name&#39;] ?&gt;&lt;&#x2F;name&gt;</span><br><span class="line">        &lt;author&gt;&lt;?php echo $arr[3][&#39;author&#39;] ?&gt;&lt;&#x2F;author&gt;</span><br><span class="line">        &lt;desc&gt;&lt;?php echo $arr[3][&#39;desc&#39;] ?&gt;&lt;&#x2F;desc&gt;</span><br><span class="line">    &lt;&#x2F;book&gt;</span><br><span class="line">&lt;&#x2F;booklist&gt;</span><br></pre></td></tr></table></figure>





<h3 id="json数据格式-主流数据格式"><a href="#json数据格式-主流数据格式" class="headerlink" title="json数据格式 主流数据格式"></a>json数据格式 主流数据格式</h3><p>json数据 和 普通的js对象的区别</p>
<ol>
<li>json数据没有变量</li>
<li>json形式的数据结尾没有分号</li>
<li>json数据中的键必须用双引号包住</li>
<li>json文件不能用注释</li>
</ol>
<p>json数据格式 :</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	name:&#39;zhangsan&#39;,</span><br><span class="line">	age:12</span><br><span class="line">	lover :[&#39;coding&#39;,&#39;singing,&#39;dancing&#39;]</span><br><span class="line">	friend:&#123;</span><br><span class="line">		height:&#39;180cm&#39;,</span><br><span class="line">		weitht :&#39;80kg&#39;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">json 数据</span><br><span class="line">&#123;</span><br><span class="line">	“name”:&quot;zhangsan&quot;,</span><br><span class="line">	&quot;age&quot;:12</span><br><span class="line">	&quot;lover&quot; :[&quot;coding&quot;,&quot;singing&quot;,&quot;dancing&quot;]</span><br><span class="line">	&quot;friend&quot;:&#123;</span><br><span class="line">		&quot;height&quot;:&quot;180cm&quot;,</span><br><span class="line">		&quot;height&quot;:&quot;180cm&quot;,</span><br><span class="line">		&quot;lover&quot;:[],</span><br><span class="line">		&quot;friend&quot;:&#123;&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h3 id="json数据解析"><a href="#json数据解析" class="headerlink" title="json数据解析"></a>json数据解析</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var data = xhr.responseText;</span><br><span class="line">var d = JSON.parse(data)</span><br><span class="line"></span><br><span class="line">var str = '&#123;"name":"zhangsan"."age":"12"&#125;';</span><br><span class="line">var obj = JSON.parse(str); //把json形式的字符串转成对象</span><br><span class="line">console.log(obj);</span><br><span class="line"></span><br><span class="line">var str1 = JSON.stringify(obj); // 把对象转成字符串</span><br><span class="line">console.log(str1);//</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">xhr.onreadystatechange &#x3D; function()&#123;</span><br><span class="line">	&#x2F;*</span><br><span class="line">	readyState:</span><br><span class="line">	2 浏览器已经收到了服务器响应的数据</span><br><span class="line">	3 正在解析数据</span><br><span class="line">	4 数据已经解析完成，可以使用了，但是数据不一定是正常的</span><br><span class="line">	*&#x2F;</span><br><span class="line">	</span><br><span class="line">	if(xhr.readyState &#x3D;&#x3D; 4 &amp;&amp; xhr.status &#x3D;&#x3D; 200)&#123;</span><br><span class="line">	&#x2F;&#x2F; 200 状态码 响应成功  404 没有找到请求的资源 500 服务器端错误</span><br><span class="line">	var d &#x3D; eval(”(“+data+“)”); &#x2F;&#x2F;eval的作用就是把字符串解析成js代码并执行 早期的做法，不安全</span><br><span class="line">	&#x2F;&#x2F; responseText</span><br><span class="line">		cosole.log(xhr.responseText)</span><br><span class="line">		var data &#x3D; xhr.responseText;</span><br><span class="line">		var d &#x3D; JSON.parse(data)</span><br><span class="line">		console.log(d.name)</span><br><span class="line">		console.log(d.age)</span><br><span class="line">		console.log(d.friend.high)</span><br><span class="line">		console.log(d.friend.weitht) </span><br><span class="line">		var tag &#x3D; &#39;&lt;div&gt;&lt;span&gt;&#39;+d.name+&#39;&lt;&#x2F;span&gt;&lt;span&gt;&#39;+d.age+&#39;&lt;&#x2F;span&gt;&lt;span&gt;&#39;+d.lover+&#39;&lt;&#x2F;span&gt;&lt;span&gt;&#39;+d.friend.high+&lt;&#x2F;span&gt;&lt;&#x2F;div&gt;&#39;;</span><br><span class="line">		document.getElementById(&#39;&#39;).innerHTML &#x3D; tag;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>数据格式</p>
<p>xml </p>
<p>json</p>
<h3 id="php开发json"><a href="#php开发json" class="headerlink" title="php开发json"></a>php开发json</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;?php</span><br><span class="line">	&#x2F;&#x2F;echo &#39;&#123;“username”:&quot;zhangsan&quot;,&quot;age&quot;:&quot;12&quot;&#125;&#39;;</span><br><span class="line">	$uname &#x3D; &#39;zhangsan&#39;;</span><br><span class="line">	$age &#x3D; &#39;13&#39;;</span><br><span class="line">	echo &#39;&#123;&quot;username&quot;:&quot;&#39;.$uname.&#39;&quot;,&quot;age&quot;:&quot;&#39;.$age.&#39;&quot;&#125;&#39;;</span><br><span class="line">	&#x2F;&#x2F; json_encode() 作用:就是把数组转化成json形式的字符串</span><br><span class="line">	$arr &#x3D; array(1,2,3);</span><br><span class="line">	$str &#x3D; json_encode($arr); 装换成json数据格式</span><br><span class="line">	echo $str;</span><br><span class="line">?&gt;</span><br></pre></td></tr></table></figure>





<h3 id="初步理解异步效"><a href="#初步理解异步效" class="headerlink" title="初步理解异步效"></a>初步理解异步效</h3><p>同步与异步</p>
<p>页面加载的同步与异步</p>
<h3 id="同步与异步理"><a href="#同步与异步理" class="headerlink" title="同步与异步理"></a>同步与异步理</h3><h3 id="同步与异步底"><a href="#同步与异步底" class="headerlink" title="同步与异步底"></a>同步与异步底</h3><h3 id="Ajax初步封装"><a href="#Ajax初步封装" class="headerlink" title="Ajax初步封装"></a>Ajax初步封装</h3><h3 id="封装应用案例"><a href="#封装应用案例" class="headerlink" title="封装应用案例"></a>封装应用案例</h3>
    </div>

    
    
    
        <div class="reward-container">
  <div></div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.jpg" alt="heweiliang 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/images/alipay.jpg" alt="heweiliang 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/04/17/%E5%89%8D%E7%AB%AF/JavaScript/JSON/JSON/" rel="prev" title="前端/JavaScript/JSON/JSON">
      <i class="fa fa-chevron-left"></i> 前端/JavaScript/JSON/JSON
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/04/20/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E9%A1%B9%E7%9B%AE/" rel="next" title="计算机基础/项目">
      计算机基础/项目 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    
  <div class="comments">
    <div id="lv-container" data-id="city" data-uid="MTAyMC81MDY1MC8yNzEzMw=="></div>
  </div>
  

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#AJAX"><span class="nav-number">1.</span> <span class="nav-text">AJAX</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#VSCoce-插件"><span class="nav-number">1.1.</span> <span class="nav-text">VSCoce 插件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Live-Server"><span class="nav-number">1.1.1.</span> <span class="nav-text">Live Server</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AJAX基础"><span class="nav-number">1.2.</span> <span class="nav-text">AJAX基础</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#前端相关的技术点"><span class="nav-number">1.2.0.1.</span> <span class="nav-text">前端相关的技术点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Wampserver安装"><span class="nav-number">1.2.1.</span> <span class="nav-text">Wampserver安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#服务器与Ajax"><span class="nav-number">1.2.2.</span> <span class="nav-text">服务器与Ajax</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#网站"><span class="nav-number">1.2.3.</span> <span class="nav-text">网站</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#静态网站"><span class="nav-number">1.2.3.1.</span> <span class="nav-text">静态网站</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#动态网站"><span class="nav-number">1.2.3.2.</span> <span class="nav-text">动态网站</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是AJAX"><span class="nav-number">1.2.4.</span> <span class="nav-text">什么是AJAX</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#AJAX可以做什么"><span class="nav-number">1.2.5.</span> <span class="nav-text">AJAX可以做什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#概念"><span class="nav-number">1.2.6.</span> <span class="nav-text">概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#客户端与服务器（计算机概述）"><span class="nav-number">1.2.7.</span> <span class="nav-text">客户端与服务器（计算机概述）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#通信协议（http-ftp-smtp-pop3…）"><span class="nav-number">1.2.8.</span> <span class="nav-text">通信协议（http&#x2F;ftp&#x2F;smtp&#x2F;pop3…）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#http-协议"><span class="nav-number">1.2.8.1.</span> <span class="nav-text">http 协议</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#https-协议"><span class="nav-number">1.2.8.2.</span> <span class="nav-text">https 协议</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ftp协议"><span class="nav-number">1.2.8.3.</span> <span class="nav-text">ftp协议</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#网络、IP地址、端口、域名"><span class="nav-number">1.2.9.</span> <span class="nav-text">网络、IP地址、端口、域名</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#静态网站、动态网站"><span class="nav-number">1.2.10.</span> <span class="nav-text">静态网站、动态网站</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AJAX-XHR-创建-gt-请求-gt-响应-gt-readyState函数"><span class="nav-number">1.3.</span> <span class="nav-text">AJAX XHR 创建 &#x3D;&gt; 请求 &#x3D;&gt;响应 &#x3D;&gt; readyState函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#XHR-创建对象"><span class="nav-number">1.3.1.</span> <span class="nav-text">XHR 创建对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#XMLHttpRequest对象"><span class="nav-number">1.3.1.1.</span> <span class="nav-text">XMLHttpRequest对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建XMLHttpRequest对象"><span class="nav-number">1.3.1.2.</span> <span class="nav-text">创建XMLHttpRequest对象</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#XHR-请求-xmlhttp-open"><span class="nav-number">1.3.2.</span> <span class="nav-text">XHR 请求 xmlhttp.open()</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#向服务器发送请求"><span class="nav-number">1.3.2.1.</span> <span class="nav-text">向服务器发送请求</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#GET-还是-POST的区别"><span class="nav-number">1.3.2.2.</span> <span class="nav-text">GET 还是 POST的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#Get请求"><span class="nav-number">1.3.2.2.1.</span> <span class="nav-text">Get请求</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Post请求"><span class="nav-number">1.3.2.2.2.</span> <span class="nav-text">Post请求</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#url-服务器上的文件"><span class="nav-number">1.3.2.3.</span> <span class="nav-text">url-服务器上的文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#异步-True-或-False？"><span class="nav-number">1.3.2.4.</span> <span class="nav-text">异步 - True 或 False？</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#Async-true"><span class="nav-number">1.3.2.4.1.</span> <span class="nav-text">Async &#x3D; true</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Async-false"><span class="nav-number">1.3.2.4.2.</span> <span class="nav-text">Async &#x3D; false</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#XHR-响应"><span class="nav-number">1.3.3.</span> <span class="nav-text">XHR 响应</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#服务器响应"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">服务器响应</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#responseText-属性"><span class="nav-number">1.3.3.2.</span> <span class="nav-text">responseText 属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#responseXML-属性"><span class="nav-number">1.3.3.3.</span> <span class="nav-text">responseXML 属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#XHR-readyState"><span class="nav-number">1.3.4.</span> <span class="nav-text">XHR readyState</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#onreadystatechange-事件"><span class="nav-number">1.3.4.1.</span> <span class="nav-text">onreadystatechange 事件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#使用-Callback-函数"><span class="nav-number">1.3.4.2.</span> <span class="nav-text">使用 Callback 函数</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AJAX高级"><span class="nav-number">1.4.</span> <span class="nav-text">AJAX高级</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#AJAX-ASP-PHP"><span class="nav-number">1.4.1.</span> <span class="nav-text">AJAX ASP&#x2F;PHP</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#AJAX-数据库"><span class="nav-number">1.4.2.</span> <span class="nav-text">AJAX 数据库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#AJAX-XML文件"><span class="nav-number">1.4.3.</span> <span class="nav-text">AJAX XML文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨域"><span class="nav-number">1.5.</span> <span class="nav-text">跨域</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#AJA项目"><span class="nav-number">2.</span> <span class="nav-text">AJA项目</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#原生Ajax详解"><span class="nav-number">2.1.</span> <span class="nav-text">原生Ajax详解</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#隐藏帧iframe方式实现页面局-同步"><span class="nav-number">2.1.1.</span> <span class="nav-text">隐藏帧iframe方式实现页面局 同步</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#实现页面局部更新"><span class="nav-number">2.1.2.</span> <span class="nav-text">实现页面局部更新</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#xhr对象创建"><span class="nav-number">2.1.3.</span> <span class="nav-text">xhr对象创建</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#请求参数分析"><span class="nav-number">2.1.4.</span> <span class="nav-text">请求参数分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#响应状态分析"><span class="nav-number">2.1.5.</span> <span class="nav-text">响应状态分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#xml数据格式-用的少"><span class="nav-number">2.1.6.</span> <span class="nav-text">xml数据格式 用的少</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#xml数据解析"><span class="nav-number">2.1.7.</span> <span class="nav-text">xml数据解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#php开发xml"><span class="nav-number">2.1.8.</span> <span class="nav-text">php开发xml</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#json数据格式-主流数据格式"><span class="nav-number">2.1.9.</span> <span class="nav-text">json数据格式 主流数据格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#json数据解析"><span class="nav-number">2.1.10.</span> <span class="nav-text">json数据解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#php开发json"><span class="nav-number">2.1.11.</span> <span class="nav-text">php开发json</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#初步理解异步效"><span class="nav-number">2.1.12.</span> <span class="nav-text">初步理解异步效</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#同步与异步理"><span class="nav-number">2.1.13.</span> <span class="nav-text">同步与异步理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#同步与异步底"><span class="nav-number">2.1.14.</span> <span class="nav-text">同步与异步底</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Ajax初步封装"><span class="nav-number">2.1.15.</span> <span class="nav-text">Ajax初步封装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#封装应用案例"><span class="nav-number">2.1.16.</span> <span class="nav-text">封装应用案例</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="heweiliang"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">heweiliang</p>
  <div class="site-description" itemprop="description">heweiliang blog</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">96</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-google"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title2</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title3</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">heweiliang</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">376k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">5:42</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/three-waves.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  

<script>
NexT.utils.loadComments(document.querySelector('#lv-container'), () => {
  window.livereOptions = {
    refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
  };
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];
    if (typeof LivereTower === 'function') { return; }
    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;
    e.parentNode.insertBefore(j, e);
  })(document, 'script');
});
</script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/Epsilon2.1.model.json"},"display":{"position":"left","width":300,"height":600},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
